<template xmlns="http://www.w3.org/1999/html">
  <div class="evaluate">
    <van-notice-bar
      wrapable
      scrollable="false"
      text="您的评分与卖家评分都提交后，系统将会自动把钱款打款到你的账户上！"/>
    <van-card title="招收快递员" thumb="/static/images/icon.jpg" class="content">
      <div slot="bottom" class="bottom">公司：顺丰快递</div>
    </van-card>
    <van-cell-group title="点击评分" class="pingfen">
      <van-cell title="工作环境" border="true" title-class="contentTitle" >
        <div slot="right-icon" class="pingfeng-content">
          <van-rate
            value=""
            icon="like"
            void-icon="like-o"
            @change="onChange" icon-class="contentIcon" class="contentIconAll"
          />
          <span class="" class="contentContent" >良好</span>
        </div>
      </van-cell>
      <van-cell title="薪资待遇"  border="true" title-class="contentTitle">
        <div slot="right-icon" class="pingfeng-content">
          <van-rate
            value=""
            icon="like"
            void-icon="like-o"
            @change="onChange" icon-class="contentIcon" class="contentIconAll"
          />
          <span class="" class="contentContent" >良好</span>
        </div>
      </van-cell>
      <van-cell title="薪资待遇" border="true" title-class="contentTitle">
          <div slot="right-icon" class="pingfeng-content">
            <van-rate
              value=""
              icon="like"
              void-icon="like-o"
              @change="onChange" icon-class="contentIcon" class="contentIconAll"
            />
            <span class="" class="contentContent" >良好</span>
          </div>
      </van-cell>
    </van-cell-group>
    <view class='eva_content'>
      <view class='eva_left'>
        内容
      </view>
      <view class='eva_right'>
        <span @click='label' :class="eva_attitude===false ? 'labelColor':''" >服务态度好</span>
        <span @click='label1' :class="eva_time===false? 'labelColor':''" >店家态度好</span>
        <span @click='label2' :class="eva_efficiency===false?'labelColor':''" >效率高</span>
        <span @click='label3' :class="eva_environment===false?'labelColor':''" >门店环境好</span>
        <span @click='label4' :class="eva_professional===false?'labelColor':''" >很专业</span>
      </view>
    </view>
    <div class="eva_row">
      <div class="eva_screen">
        <label class="eva_name">相关截图（选填）</label>
        <label class="eva_img-count">{{eva_img_count}}/4</label>
      </div>
      <!-- v-for是vue的语法，循环语句，循环显示当前上传的照片 -->
        <label v-for="(item, index) in eva_src" :key="index" class="eva_delete_parent">
          <img class="eva_img" :src="item" @click="eva_priview(item)">
          <img src="/static/images/deleteimage.png" alt="" class="eva_delete" @click="eva_deleteimg(index)">
        </label>
      <!-- v-if是判断语句，判断当前照片数量如果小于2张，就显示添加照片的按钮；反之就不显示了在这里添加点击事件，点击按钮调用uploadPicture方法上传照片 -->
      <label  v-if="eva_img_count < 4" @click="eva_uploadPicture">
        <img class="eva_add-img" :src="eva_addimage">
      </label>
    </div>
    <div class="eva_row eva_text">
      <div>
          <textarea
            v-model='eva_opinion'
            class = "eva_input"
            maxlength='200'
            placeholder="商家描述得相符吗？说说您的心得吧~"
          ></textarea>
        <!-- word_count用来保存实时输入字数的长度 -->
        <label class="eva_word-count">{{eva_word_count}}/200</label>
      </div>
    </div>
    <button class='eva_btn'>提交评价</button>

<!--    <van-submit-bar-->
<!--      :price="90"-->
<!--      button-text="提交评分"-->
<!--      tip="您的评分与卖家评分都提交后，系统将会自动把钱款打款到你的账户上！"-->
<!--      @submit="onSubmit"-->
<!--      label="评分："-->
<!--      button-type="info"-->
<!--      currency=" "></van-submit-bar>-->

  </div>
</template>

<script>


export default {
  data () {
    return {
      eva_attitude: true,
      eva_time: true,
      eva_efficiency: true,
      eva_environment: true,
      eva_professional: true,

      eva_opinion: '',
      eva_word_count: 0,

      eva_src: [],
      eva_img_count: 0,
      eva_addimage:"/static/images/addimage.png",


    }
  },
  watch: {
    eva_opinion () {
      this.eva_word_count = this.eva_opinion.length
    },
    eva_src () {
      this.eva_img_count = this.eva_src.length
    }
  },
  methods: {
    chooseImage (index) {
      var that = this;
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: function (res) {
          // console.log(res)
          wx.showToast({
            title: '正在上传',
            icon: 'loading',
            mask: true,
            duration: 1000
          })
          var tempFilePaths = res.tempFilePaths
          that.fileList[index].imgSrc = tempFilePaths
          that.fileList[index].isCion = false
          that.fileList[index].isImage = true
          console.log(tempFilePaths)
        }
      })
    },
    label(){
      this.eva_attitude = !this.eva_attitude;
      if(!this.eva_attitude){
        this.eva_opinion = this.eva_opinion + " " + "服务态度好" + ""
      }
    },
    label1(){
      this.eva_time = !this.eva_time;
      if(!this.eva_time){
        this.eva_opinion = this.eva_opinion + " " + "店家态度好" + ""
      }
    },
    label2(){
      this.eva_efficiency = !this.eva_efficiency;
      if(!this.eva_efficiency){
        this.eva_opinion = this.eva_opinion + " " + "效率高" + ""
      }
    },
    label3(){
      this.eva_environment = !this.eva_environment;
      if(!this.eva_environment){
        this.eva_opinion = this.eva_opinion + " " + "门店环境好" + ""
      }
    },
    label4(){
      this.eva_professional = !this.eva_professional;
      if(!this.eva_professional){
        this.eva_opinion = this.eva_opinion + " " + "很专业" + ""
      }
    },
    eva_uploadPicture () {
      //将this保存到that上面
      let that = this
      wx.chooseImage({
        count: 4,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success (res) {
          // tempFilePath可以作为img标签的src属性显示图片
          const tempFilePaths = res.tempFilePaths
          //用that.src来调用data函数定义的src变量
          that.eva_src.push(tempFilePaths)
          that.eva_img_count++
          // console.log('that.src',that.src)
        }
      })
    },
    eva_deleteimg(index){
        this.eva_src.splice(index,1);
      // console.log(index)
      this.eva_img_count--;
    },
    eva_priview(item){
      var img=item
      var that= this;
      console.log(img)
      console.log(that.eva_src[0])
      wx.previewImage({
        current: img, // 当前显示图片的http链接
        urls: img,
        success: (res)=>{
          console.log(res)
        },
        fail: (res)=>{
          console.log('预览失败',res)
        }
      })
    }

  }
}



</script>

<style lang="stylus" rel="stylesheet/stylus">
.evaluate
  .eva_text
    height 110px
  .eva_row
    border-bottom 1px #E8E8E8 solid
    padding 5px 15px
    .eva_screen
      margin-bottom 32rpx
    .eva_name
      width 80%
      height 40px
      line-height 40px
    .eva_input
      width 100%
      height 85px
      font-size 14px
      padding-top 5px
    .eva_word-count
      float right
      color #808080
    .eva_img-count
      float right
      line-height 40px
      color #808080
    .eva_add-img
      width 80px
      height 80px
    .eva_delete_parent
      display inline-block
      position relative
    .eva_delete
      width 41rpx
      height 41rpx
      position absolute
      top -18rpx
      right -5rpx
    .eva_img
      width 66px
      height 66px
      margin-bottom 7px
      margin-right 41rpx
  .labelColor
    color #c00
    border 1px solid #c00 !important
  .content
    .bottom
      display block
      width 100%
      margin-top 100rpx
  .pingfen
    .pingfeng-content
      width 457rpx
      display flex
      justify-content space-between
      margin-left -66rpx
    van-cell
      div
        .contentIconAll
          width 250rpx
          margin-right -55rpx
          flex 3
          margin-left 71rpx
          margin-top 6rpx
          /*background-color black*/
        .contentContent
          width 100rpx
          margin-right -50rpx
          flex 1
  textarea
    width 100%
    height 100rpx
  .picture
    display inline-block
    height 200rpx
    width 200rpx
    border 1rpx solid rgb(199, 199, 199)
    margin 10rpx
    .icon-1
      display inline-block
      height 100rpx
      width 100rpx
      margin 50rpx 50rpx
    .icon-2
      display inline-block
      height 200rpx
      width 200rpx
      margin 0 0
      background-size cover
  .eva_content
    margin-top 12rpx
    .eva_left
      display inline-block
      width 100rpx
      line-height 100rpx
      font-size 36rpx
      float left
      margin-left 37rpx
    .eva_right
      width 610rpx
      font-size 30rpx
      float left
      color #888
      margin-left 9rpx
      span
        font-size 24rpx
        padding 13rpx 24rpx
        float left
        border 1px solid #888;
        border-radius 10rpx
        margin-right 34rpx
        margin-top 20rpx

  .eva_btn
    width 600rpx
    height 80rpx
    line-height 80rpx
    font-size 30rpx
    color #fff
    background #1296DB
    position fixed
    left 75rpx
    bottom 37rpx
</style>
